<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            width: 100px;
            height: 50px;
            padding: 5px;
            margin: 5px;
        }

        #app {
            position: relative;
            width: 500px;
            height: 500px;
            border: 20px solid green;
            margin: 20px auto;
        }

        #ball {
            position: absolute;
            width: 50px;
            height: 50px;
            border: 5px solid red;
            border-radius: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="ball"></div>
</div>
<button>左</button>
<button>右</button>
<button>上</button>
<button>下</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    const ball = document.querySelector("#ball");
    ball.style.left = "100px";
    btns[0].onclick = function () {
        const leftX = ball.style.left.replace("px","")/1;
        ball.style.left = (leftX-10)+"px";
        // console.log(ball.style.left.replace("px","")/1)
    }
    btns[1].onclick = function () {
        const leftX = ball.style.left.replace("px","")/1;
        ball.style.left = (leftX+10)+"px";
        // console.log(ball.style.left.replace("px","")/1)
    }
    btns[2].onclick = function () {
        const topY = ball.style.top.replace("px","")/1;
        ball.style.top = (topY-10)+"px";
    }
    btns[3].onclick = function () {
        const topY = ball.style.top.replace("px","")/1;
        ball.style.top = (topY+10)+"px";
    }
</script>
</html>